<template>


  <el-dialog :title="'区域' + (type == 'add'?'添加':'编辑' )" :visible="visible" @close="visible = false">
    <el-form :model="form" label-width="80px">
      <el-form-item v-if="type == 'add'" label="上级区域">
        <el-input disabled v-model="parentName"/>
      </el-form-item>
      <el-form-item label="编码">
        <el-input :disabled="type != 'add'" v-model="form.areaId"/>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="form.name"/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="onOk">确 定</el-button>
    </div>
  </el-dialog>

</template>

<script>
  import axios from '@/util/axios'

  export default {

    data(){
      return {
        visible:false,
        loading:false,
        type:'add',
        form:{},
        parentName:''
      };

    },

    methods: {
      onOk(){

        const exec = (this.type == 'add')? axios.put : axios.patch;
        this.loading = true;
        exec('/api/v1/sarea',axios.form(this.form))
        .then(()=>{
          this.$message.success(((this.type == 'add') ? '添加':'修改') + '成功');
          this.visible = false;
          this.loading = false;
          this.$emit('success',(this.type == 'edit') ? this.form.name : undefined);
        })
        .catch( e => {
          setTimeout( e => this.loading = false,2000);
        });

      },

      add(areaId,areaName){
        this.type = 'add';
        this.visible = true;
        this.form = {parentId:areaId};
        this.parentName = areaName;
      },

      edit(areaId,areaName){
        this.type = 'edit';
        this.visible = true;
        this.form = {areaId,name:areaName};
      }

    }
  }
</script>

